<template>
	<view  :style="[AppSkinVar]">
		<view class="e-p-30 bg-white e-radius-20">
			<view class="e-p-t-10 e-p-b-10">
				<text>{{ $t('offlinePay.合计') }}</text>
				<text class="c-red">{{ $unitEn }}{{ info.payMoney }}</text>
			</view>
		</view>
		<view class="e-p-t-24 e-p-b-24 e-p-l-20 fw-600">
			{{ $t('offlinePay.title') }}
		</view>
		<view class="bg-white e-radius-20 e-font-30  e-m-b-20 e-p-l-30 e-p-r-30">
			<view class="e-flex e-flex-between e-p-t-38 e-p-b-38 border-b-e6">
				<text>{{ $t('offlinePay.name') }}</text>
				<view class="e-flex">
					<text>{{info.payee}}</text>
					<image :src="$staticPath('copy.png')" class="img-20 e-m-l-10" @tap="$copy(info.payee)"></image>
				</view>
			</view>
			<view class="e-flex e-flex-between e-p-t-38 e-p-b-38 border-b-e6">
				<text>{{ $t('offlinePay.card') }}</text>
				<view class="e-flex">
					<text>{{info.accountNo}}</text>
					<image :src="$staticPath('copy.png')" class="img-20 e-m-l-10" @tap="$copy(info.accountNo)"></image>
				</view>
			</view>
			<view class="e-flex e-flex-between e-p-t-38 e-p-b-38 border-b-e6">
				<text>{{ $t('offlinePay.bank') }}</text>
				<text>{{info.bankName}}</text>
			</view>
			<view class="e-flex e-flex-between e-p-t-38 e-p-b-38">
				<text>{{ $t('offlinePay.bankName') }}</text>
				<text>{{info.subbranch}}</text>
			</view>
		</view>
		<view class="c-red e-p-l-30 e-p-r-30 e-m-b-40" v-if="info.tips">
			{{info.tips }}
		</view>
		<view class="e-font-28">
			<text class="c-red">*</text>
			<text class="fw-600">{{ $t('offlinePay.updateTitle') }}</text>
		</view>
		<view class="e-m-t-30 ">
			<upload ref="upload" :uploadIcon="$staticPath('user/upload.png')"></upload>
		</view>
		<view class="offlinePay__btn e-flex-xy-center bg-white">
			<view class="bg-primary c-white text-center" @tap="post">
				{{ $t('order.提交') }}
			</view>
		</view>
	</view>
</template>

<script>
import {getOfflinePayInfo,postOfflinePayInfo} from '@/common/request/api'
export default {
	data() {
		return {
			code:'',
			info: {}
		}
	},
	onLoad(opt) {
		this.code = opt.code
		getOfflinePayInfo(opt.code).then(res => {
			if(res.code === 200){
				this.info = res
			}
		})
	},
	methods:{
		post () {
			let voucherUrl = this.$refs.upload.imgList.map(item => item.url).join(',')||null
			if(voucherUrl){
				postOfflinePayInfo({
					payCode:this.code,
					voucherUrl
				}).then(res => {
					this.$toastApp(res.msg)
					if(res.code === 200){
						setTimeout(() => {
							this.$back()
						},200)
					}
				})
			}else{
				this.$toastApp(this.$t('offlinePay.postErr'))
			}
			
		}
	}
}
</script>
<style>
page {
	background: #f7f7f7;
	padding: 20rpx;
}
</style>
<style lang="scss">

.border-b-e6{
	border-bottom: 2rpx solid #e6e6e6;
}
.offlinePay__btn{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 112rpx;
	> view {
		width: calc(100vw - 40rpx);
		padding: 24rpx 0;
		border-radius: 46rpx;
	}
}
</style>
